<template>
  <transition name="fade">
    <div class='shopcart-detail-wrapper' v-show="isshow">
      <div class='detail-background' @click="closeDetail"></div>
      <div class='detail-content'>
        <div class='detail-header'>
          <h1 class='title'>购物车列表</h1>
          <span class='clearlist' @click="clear">清空</span>
        </div>
        <div class='shopcart-list-wrapper' ref="listContent">
          <transition-group name="list" tag="ul" class='shopcart-list'>
            <li class='shopcart-item' v-for='(food,index) in detailSelectFoods' v-bind:key="index">
              <div class='food-wrapper'>
                <span class="food-name">{{food.name}}</span>
                <div class="price-wrapper">
                  <span class="totalprice">￥{{food.price * food.count}}</span>
                  <v-cartcontrol :food="food" class="cartcontrol"></v-cartcontrol>
                </div>
              </div>
            </li>
          </transition-group>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type='text/ecmascript-6'>
  import cartcontrol from '../cartcontrol/cartcontrol.vue';
  import Bscroller from 'better-scroll';
  import {mapMutations} from 'vuex';

  export default {
    name: 'shopcartdetail',
    props: {
      isshow: {
        type: Boolean,
        default() {
          return false;
        }
      },
      selectFoods: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    watch: {
      isshow(val) {
        if (val) {
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new Bscroller(this.$refs.listContent, {
                click: true
              });
            } else {
              this.scroll.refresh();
            }
          });
        }
      }
    },

    methods: {
      ...mapMutations({
        add: 'ADD_CART',
        minus: 'MINUS_CART',
        clear: 'CLEAR_CART'
      }),
      closeDetail() {
        this.$emit('on-closeDetail');
      }
    },
    components: {'v-cartcontrol': cartcontrol},
    computed: {
      detailSelectFoods() {
        if (!this.selectFoods[0]) {
          this.closeDetail();
        }
        return this.selectFoods;
      }
    }
  };
</script>
<style lang='stylus' rel='stylesheet/stylus'>
  @import '../../../../common/stylus/mixin.styl'
  .shopcart-detail-wrapper
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    z-index 10
    &.fade-enter-active, &.fade-leave-active
      transition: all 1s
    &.fade-enter, &.fade-leave-active
      opacity 0
    .detail-background
      position fixed
      top 0
      left 0
      z-index -1
      width 100%
      height 100%
      background-color rgba(7, 17, 27, 0.6)
      -webkit-backdrop-filter blur(10px)
    .detail-content
      position absolute
      bottom 48px
      left 0
      width 100%
      height 265px
      display flex
      overflow hidden
      flex-direction: column
      .detail-header
        flex 0 0 40px
        padding 0 18px
        line-height 40px
        height 40px
        z-index 10
        background #f3f5f7
        border-after-1px(rgba(7, 17, 27, 0.1))
        .title
          display inline-block
          font-size 14px
          color rgb(7, 17, 27)
          float left
          font-weight 200
          line-height 40px
        .clearlist
          display inline-block
          font-size 12px
          float right
          color rgb(0, 160, 220)
          line-height 40px
      .shopcart-list-wrapper
        position absolute
        top 40px
        width 100%
        flex 1
        height 225px
        overflow: hidden
        background-color white
        .shopcart-item
          margin 0 18px 0 18px
          position relative
          border-after-1px(rgba(7, 17, 27, 0.1))
          height 48px
          line-height 48px
          .list-enter-active, .list-leave-active
            transition: all 1s
          .list-enter, .list-leave-to
            opacity: 0;
            transform: translateY(30px);
          .food-name
            color rgb(7, 17, 27)
            height 24px
            font-size 14px
            display inline-block
            line-height 24px
          .price-wrapper
            display inline-block
            position absolute
            right 0px
            .totalprice
              color rgb(240, 20, 20)
              line-height 24px
              height 24px
              font-size 14px
              font-weight 700
              padding-left 18px
              margin-right 12px
              display inline-block
            .cartcontrol
              display inline-block
        &:last-child
          border-none()
</style>
